<template>
    <div class="myChart">
        <span
            style="color:white;font-size: 14px;font-weight: bold;font-style: italic;letter-spacing: 2px;margin-left: 10%;">实时预警工厂</span>
        <img src="../../assets/images/divide.png" alt="" style="width: 100%;">
        <dv-scroll-board :config="alarmDataConfig" style="width:100%;height:90%" />
        <img src="../../assets/images/left-bottom.png" alt="" style="position: absolute;left: 0;bottom: 0;">
    </div>
</template>

<script>
import { deptAlarm } from '../../api/oil/statistic';
import DateTool from '../../utils/DateTool';

export default {
    name: 'AlarmDept',
    data() {
        return {
            alarmDataConfig: {},
            alarmData: [],
            config:{ header: ['工厂名称', '报警次数'], columnWidth: [300, 100], align: ['left', 'center'], headerBGC: 'linear-gradient(to right, #33ccff 0%, #ff99cc 100%);', headerColor: '#fff', oddRowBGC: 'transparent', evenRowBGC: 'transparent', oddRowColor: '#fff', evenRowColor: '#fff'}
        };
    },
    created() {
        this.getData();
    },
    methods: {
        getData() {
            var params = {
                startDate: '2021-01-01',
                endDate: DateTool.now()
            };
            deptAlarm(params).then(res => {
                var alarmData = res.data;
                this.alarmData = alarmData.map(obj=>Object.values(obj).reverse());
                this.config.data = this.alarmData;
                this.alarmDataConfig = this.config;
            });
        }
    },
    mounted() {
        // Add your mounted logic here
    }
};
</script>

<style scoped></style>